<template>
	<view class="container">
		<view class="title">
			选择学习阶段<text>（可随时更改，请放心选择 ）</text>
		</view>
		<view class="selectContainer">
			<view class="item" v-for="(item,index) in info" :key="index">
				<navigator :url="'./list?id='+item.id" hover-class="none">
					{{item.name}}
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				token: "",
				pid: "",
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.pid = option.id;
			uni.showLoading({
				title:"加载中...",
				mask:true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData()
				}
			});
		},
		methods: {
			getData() {
				uni.request({
					url: 'https://mx.acktechnologies.com.cn/api/wxapp/apply/getSecondCate',
					method: 'GET',
					data: {
						"token": this.token,
						"pid": this.pid,
					},
					success: res => {
						uni.hideLoading();
						if (res.statusCode === 200 && res.data.code === 1) {
							this.info = res.data.data;
						} else {
							uni.redirectTo({
								url: '../login/auth'
							});
						}
						console.log(res)
					},
					fail() {
						uni.redirectTo({
							url: '../login/auth'
						});
					},
					complete: (res) => {
						console.log(res)
					}
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 40rpx;
	}

	.title {
		font-size: 15px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #333333;
		line-height: 46rpx;

		text {
			font-size: 13px;
			color: #999999;
		}
	}

	.selectContainer {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;

		.item {
			padding: 16rpx 60rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 40rpx 0px #E9EBF6;
			border-radius: 36rpx;
			margin-top: 40rpx;
			font-size: 13px;
			color: #333333;
			text-align: center;
			background: #EEEEEE;
			margin-right: 20px;
		}
	}
</style>
